<!-- 订单购买页 -->
<template>
  <section style="padding-bottom: 100px;">

    <template v-if="!defaultAddr">
      <van-contact-card
        type="add"
        add-text="新建收货地址"
        @click="addAddr();"
      />
    </template>

    <div class="stripe-border--bottom index__block address__block" v-if="defaultAddr" @click="goAddrList();">
      <div>
        <div class="address-card van-cell van-cell--center van-cell--clickable">
          <div class="van-cell__value van-cell__value--alone">
            <i class="van-icon van-icon-location-o address__location"></i>
            <div class="address__content">
              <div class="address__info">
                <p class="address__name van-ellipsis">收货人：{{defaultAddr.name}}</p>
                <p class="address__tel van-ellipsis">{{defaultAddr.mobile}}</p>
              </div>
              <p class="address__detail">收货地址：{{defaultAddr.province}}{{defaultAddr.city}}{{defaultAddr.area}}{{defaultAddr.address}}</p>
            </div>
          </div>
          <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
        </div>
      </div>
    </div>

    <van-card v-for="item in cartList"
      :desc="item.color+'/'+item.size+'码'"
      :num="item.num"
      :price="item.colorSizeItem.price"
      :title="item.goods.title"
      :thumb="downloadUrl+'?fileName='+item.pic"
    />

    <div class="van-cell" style="margin-top: 0.2rem;">
      <div class="van-cell__title"><span>配送方式</span></div>
      <div class="van-cell__value" style="color: #323233;"><span>快递</span></div>
    </div>

    <van-cell-group>
      <van-field
        v-model="remark"
        label="买家留言"
        type="textarea"
        placeholder="请输入留言"
        rows="1"
        autosize
      />
    </van-cell-group>

    <div>
      <div class="price-panel">
        <p>
          商品金额<span>{{totalPrice/100 | regexMoney}}</span>
        </p>
        <div class="price-panel__total van-hairline--top">
          合计：<span class="price-panel__amount theme-color">{{totalPrice/100 | regexMoney}}</span>
        </div>
      </div>
    </div>

    <van-submit-bar
      :price="totalPrice"
      button-text="提交订单"
      @submit="onSubmit"
    />

  </section>
</template>
<script>
  import cartService from '../../api/cartService';
  import orderService from '../../api/orderService';
  import customerService from '../../api/customerService';
  import Api from '../../api/api';
  export default {
    name:'payCart',
    data() {
      return {
        cartList:[],
        keys:'',
        defaultAddr:null,
        remark:'',
        goods:{},
        downloadUrl:Api.download,
        id:'',
        totalPrice:'',
        color:'',
        size:'',
        num:'',
        colorPic:''
      }
    },
    methods: {
      onSubmit(){
        var that = this;
        if(!this.defaultAddr) {
          this.$toast('请选择收货地址');
          setTimeout(function(){
            that.addAddr();
          },1500);
          return;
        }
        var para = {
          keys:this.keys,
          remark:this.remark,
          name:this.defaultAddr.name,
          mobile:this.defaultAddr.mobile,
          addr:this.defaultAddr.address,
          province:this.defaultAddr.province,
          city:this.defaultAddr.city,
          area:this.defaultAddr.area,
          payType:1,
          host:window.location.host
        };
        orderService.addByCart(para).then((rsp)=>{
          if(rsp.result) {
          alert('order success');
          //TODO pay
        }else {
          this.$toast(rsp.errorMsg);
        }
      }).catch((error)=>{
          this.$toast('add接口异常'+error);
      });
      },
      addAddr(){
        this.$nocacheRouter('/addAddr',this.$route.query);
      },
      goAddrList(){
        this.$nocacheRouter('/addrList',this.$route.query);
      },
      _getAddr(){
        customerService.getCustomerAddrDefault().then((rsp)=>{
          if(rsp.result) {
            this.defaultAddr = rsp.obj;
        }else {
          this.$toast(rsp.errorMsg);
        }
      }).catch((error)=>{
          this.$toast('getCustomerAddrs接口异常'+error);
      });
      },
      _getCartList() {
        cartService.getCartListByKeys({keys:this.keys}).then((rsp)=>{
          if(rsp.result) {
            this.cartList = rsp.obj.cartList;
            this.totalPrice = rsp.obj.totalPrice;
          }else {
            this.$toast(rsp.errorMsg);
          }
      }).catch((error)=>{
      });
      },
    },

    mounted(){
      this.keys = this.$route.query.keys;
      this._getAddr();
      this._getCartList();
    }
  };
</script>
<style scoped>
  .van-cell__value {
    color: #323233;
  }

  .price-panel {
    font-size: 12px;
    margin: 10px 0;
    overflow: hidden;
    background-color: #fff;
  }

  .price-panel p {
    margin: 10px 0;
    padding: 0 15px;
    line-height: 16px;
  }

  .price-panel__total {
    font-size: 14px;
    text-align: right;
    padding: 13px 15px 13px 0;
    margin-left: 15px;
  }

  .theme-color {
    color: #f44 !important;
  }

  .index__block:first-child {
    margin-top: 0;
  }

  .stripe-border--bottom {
    position: relative;
  }
  .index__block {
    margin: 10px 0;
  }
  .address__block {
    padding-bottom: 2px;
  }

  .address-card {
    padding: 15px;
  }

  .van-cell--center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .van-cell {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 10px 15px;
    box-sizing: border-box;
    line-height: 24px;
    position: relative;
    background-color: #fff;
    color: #323233;
    font-size: 14px;
    overflow: hidden;
  }

  .van-cell__value--alone {
    color: #323233;
    text-align: left;
  }

  .van-cell__value {
    color: #969799;
    overflow: hidden;
    text-align: right;
    position: relative;
    vertical-align: middle;
  }

  .van-cell__title, .van-cell__value {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }

  .address__location {
    float: left;
    font-size: 16px;
    margin: 3px 5px 0 0;
  }

  .address__content, .address__content>div {
    overflow: hidden;
  }

  .address__content, .address__content>div {
    overflow: hidden;
  }

  .address__info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .address__detail {
    color: #666;
    margin-top: 3px;
    font-size: 12px;
    line-height: 16px;
    word-break: break-all;
  }

  p {
    margin: 0;
  }

  .van-cell__right-icon {
    color: #969799;
    margin-left: 5px;
  }

  .stripe-border--bottom:after {
    bottom: 0;
  }
  .stripe-border--bottom:after{
    left: 0;
    right: 0;
    content: "";
    height: 2px;
    position: absolute;
    background: -webkit-repeating-linear-gradient(135deg,#ff6d6d,#ff6d6d 20%,transparent 0,transparent 25%,#3283fa 0,#3283fa 45%,transparent 0,transparent 50%);
    background: repeating-linear-gradient(-45deg,#ff6d6d,#ff6d6d 20%,transparent 0,transparent 25%,#3283fa 0,#3283fa 45%,transparent 0,transparent 50%);
    background-size: 80px;
  }

  .address__content, .address__content>div {
    overflow: hidden;
  }

  .address__content, .address__content>div {
    overflow: hidden;
  }

  .address__info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .address__name, .address__tel {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 60%;
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 5px;
  }

  .van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .address__tel {
    text-align: right;
  }

  .address__name, .address__tel {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 60%;
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 5px;
  }
  .van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .address__detail {
    color: #666;
    margin-top: 3px;
    font-size: 12px;
    line-height: 16px;
    word-break: break-all;
  }

  .address__name, .address__tel {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    max-width: 60%;
    font-size: 16px;
    font-weight: 500;
    padding-bottom: 5px;
  }

  .van-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .van-cell__value--alone {
    color: #323233;
    text-align: left;
  }



</style>
